<template>
    <div class="container">
        <div class="left">
            <button type="primary" @click="isCollapse = !isCollapse" class="isCollapse">
                <span v-show="isCollapse">展开</span>
                <span v-show="!isCollapse">关闭</span>
            </button>
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="true" router>
                <!-- <el-menu-item index="/index/point/p">
                    <i class="el-icon-menu"></i>
                    <span slot="title">设备信息</span>
                </el-menu-item> -->
                <el-menu-item index="/index/point/plan">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">巡检计划</span>
                </el-menu-item>
                <el-menu-item index="/index/point/record">
                    <i class="el-icon-s-claim"></i>
                    <span slot="title">巡检记录</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false,
            activeIndex: '/index/point/record',
        }
    },
    created() {
        this.activeIndex = this.$route.fullPath
    },
    watch: {
        $route: {
            handler(val, oldval) {
                this.activeIndex = this.$route.fullPath
            },
            deep: true,
        },
    },
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .left {
        height: 100%;
        transition: all 0.15s;
        -webkit-transition: width 0.15s;
        -moz-transition: width 0.15s;
        -webkit-transition: width 0.15s;
        -o-transition: width 0.15s;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 120%;
        background-position: 100%;

        .isCollapse {
            height: 40px;
            background-color: #007bff;
            line-height: 40px;
            width: 65px;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        i {
            font-size: 22px;
            color: aqua;
        }
    }

    .right {
        height: 100%;
        float: left;
        flex-grow: 1;
        transition: all 0.3s;
    }
}
</style>
<style lang="less">
.container {
    .left {
        .el-submenu__title {
            background-image: none !important;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 180px;
        }

        .el-menu {
            background-color: transparent !important;
            color: #007bff !important;
            border: none !important;
        }
        .el-menu-item {
            color: #b2e3ff !important;
        }
        .el-menu-item:focus,
        .el-menu-item:hover {
            outline: 0;
            background-color: #074e9a !important;
            color: #0cd9e8 !important;
        }

        .el-menu-item.is-active {
            background-color: #007bff !important;
            color: white !important;
        }
    }
}
</style>
